<template>
    <div class="content">
        <u--form labelPosition="left" labelWidth="80" :model="form" ref="uForm">
            <u-form-item label="选择头像" borderBottom>
                <div class="form-avatar">
                    <button
                        class="avatar-wrapper"
                        open-type="chooseAvatar"
                        @chooseavatar="onChooseAvatar"
                    >
                        <img
                            class="avatar"
                            :src="userInfo.avatar || form.avatar"
                            v-if="userInfo.avatar || form.avatar"
                        />
                        <u-icon name="account-fill" color="#b2b2b2" v-else></u-icon>
                    </button>
                </div>
                <u-icon slot="right" name="arrow-right"></u-icon>
            </u-form-item>
            <u-form-item label="昵称" borderBottom rightIcon="arrow-right">
                <input
                    v-model="form.nickname"
                    type="nickname"
                    @blur="onBlur"
                    placeholder="请输入昵称"
                />
            </u-form-item>
        </u--form>
        <div class="footer-bar">
            <button class="submit-btn" @click="submit">提交</button>
            <p class="jump" @click="jump">跳过</p>
        </div>
    </div>
</template>

<script>
import { baseUrl } from '@/utils/config';
import { mapGetters } from 'vuex';
export default {
    name: 'register',
    data() {
        return {
            form: {
                avatar: '',
                nickname: '',
            },
        };
    },
    computed: {
        ...mapGetters(['userInfo']),
    },
    onShow() {
        if (this.userInfo && this.userInfo.avatar) {
            this.form.avatar = this.userInfo.avatar;
        }
    },
    methods: {
        onChooseAvatar(e) {
            let that = this;
            const { avatarUrl } = e.detail;
            uni.uploadFile({
                header: {
                    Authorization: 'Bearer ' + uni.getStorageSync('token'),
                    'tenant-id': 1,
                },
                url: baseUrl + '/app-api/member/user/update-avatar',
                filePath: avatarUrl,
                name: 'avatarFile',
                success: res => {
                    let { data } = JSON.parse(res.data);
                    that.form.avatar = data;
                },
            });
        },
        onBlur(e) {
            this.form.nickname = e.detail.value;
        },
        submit() {
            if (!this.form.avatar) {
                uni.showToast({
                    title: '请上传头像',
                    icon: 'none',
                });
                return false;
            }
            if (!this.form.nickname) {
                uni.showToast({
                    title: '请填写昵称',
                    icon: 'none',
                });
                return false;
            }
            this.$Api.member.user.updateUserInfo(this.form).then(() => {
                uni.showToast({
                    title: '修改成功',
                });
                this.$store.dispatch('getUserInfo');
                uni.navigateBack({
                    delta: 2,
                });
            });
        },
        jump() {
            uni.navigateBack({
                delta: 2,
            });
        },
    },
};
</script>

<style lang="scss" scoped>
.content {
    padding: 30rpx;
    box-sizing: border-box;
    .form-avatar {
        width: 100%;
        @include flexBox(flex-end);
    }
    .avatar-wrapper {
        width: 70rpx;
        height: 70rpx;
        margin: 0 10rpx;
        background: #f4f4f4;
        border: #f4f4f4;
        border-radius: 50rpx;
        padding: 0;
        @include flexBox(center, center);
        .avatar {
            width: 70rpx;
            height: 70rpx;
        }
    }
    .footer-bar {
        margin-top: 30rpx;
        .submit-btn {
            width: 690rpx;
            height: 88rpx;
            line-height: 88rpx;
            color: #fff;
            font-size: 32rpx;
            margin-top: 140rpx;
            background: #5428ec;
        }
        .jump {
            font-size: 32rpx;
            color: #5c5c5c;
            margin-top: 40rpx;
            text-align: center;
        }
    }
}
</style>
